<template>
  <div class="header-top">
    <div v-show="isHst"> <span @click="goHome">&lt;</span> </div>
    <div v-show="!isHst" :style="styleOpcity"> 
      <span @click="goHome">&lt;</span>
      <span>北京国际花展会</span>
    </div>
  </div>
</template>

<script>

export default {
    data() {
      return {
        isHst: true,
        styleOpcity: {
          opacity: 1,
        }
      }
    },
    methods: {
     goHome() {
       this.$router.push('/');
     }
    },
    mounted() {
      window.addEventListener("scroll",()=> {
        let top = document.documentElement.scrollTop;
        if(top > 80) {
          let opcty = top/130;
          this.styleOpcity = {opacity: opcty};
          this.isHst = false;
        }
        else
          this.isHst = true
      })
    }
}
</script>

<style lang="less" scoped>
.header-top {
  
  > div:first-child {
    background: #5c545491;
    position: fixed;
    width: 40px;
    height: 40px;
    top: 10px;
    left: 20px;
    border-radius: 50%;
    text-align: center;

    >span {
      font-size: 20px;
      color: var(--fontcolor);
      font-weight: bolder;
      line-height: 40px;
    }
  }
  > div:last-child {
    position: fixed;
    top: 0px;
    background: var(--bascolor);
    color: var(--fontcolor);
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-weight: bolder;

    >span:first-child {
      position: absolute;
      display: block;
      left: 0;
      width: 40px;
      height: 40px;
      
      margin-left: 20px;
    }
  }
}
</style>
